import { Component, OnInit, Output, EventEmitter } from '@angular/core';

declare var echarts: any;
@Component({
    selector: 'charts-root',
    templateUrl: './charts.component.html',
    styleUrls: ['./charts.component.css']
})
export class chartsComponent implements OnInit {
    @Output() onCloseCharts = new EventEmitter<Event>();
    constructor() { }
    ngOnInit() {
    }
    TreeBasic(data) {
        let dom = document.getElementById("container");
        let myChart = echarts.init(dom);
        let app = {};
        let option = null;
        myChart.showLoading();
        myChart.hideLoading();
        myChart.setOption(option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            toolbox: {
                left: '2%',
                top: '2%',
                color: '#333',
                show: true,
                feature: {
                    saveAsImage: {
                        show: true,
                        name: data.name,
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2
                    },
                    restore: {}
                }
            },
            series: [
                {
                    type: 'tree',
                    data: [data],
                    top: '1%',
                    left: '10%',
                    bottom: '1%',
                    right: '50%',
                 
                  
                    symbolSize: 5,
                    label: {
                        normal: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    leaves: {
                        label: {
                            normal: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },
                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
            
        });
        myChart.clear();
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    charts(data) { 
            this.TreeBasic(data) 
    }
    CloseCharts() {
        this.onCloseCharts.emit()
    }
}
